<script type="text/javascript">
    $(document).ready(function () {
        var modal_shown =false;

        $('#add-to-cart').click(function () {
            <% if @cart.items.count == 0 %>
                if (!modal_shown) {
                    $('#how-to-modal').modal({
                        overlayClose: true,
                        closeClass: 'modal-close'
                    });

                    modal_shown = true;
                }
            <% end %>

            $.ajax({
                url: "<%= add_to_cart_url %>",
                data: {
                    product_id: '<%= @product.id %>',
                    items: parseItemsToAdd($('.number-content'))
                },
                type: "POST",
                dataType : "script"
            });
        });

        $('.product_color_input').click(function () {
            this.select();
        });
    });
</script>


<div class="container not-right">
			<div class="row">

			<div class="bread-crumbs products">
				<div class="container">
					<div class="row">
						<ul>
							<li class="crumb"><a href="<%= root_url %>">Home</a></li>
							<li><i class="fa fa-angle-double-right"></i></li>
							<li class="current-crumb crumb"><a href="<%= products_url(:page => @product_page) %>">Cat&aacute;logo</a></li>
							<li><i class="fa fa-angle-double-right"></i></li>
							<li class="current-crumb">Detalle de producto</li>
						</ul>
					</div>
				</div>
			</div>

	<div class="cont-product row">

				<section class="col-md-9">
					<div class="product-content">
                        <div id="add-to-cart-errors" class="errors-box"></div>
                        <div id="add-to-cart-success" class="success-box"><p>El producto ha sido agregado al carrito.</p></div>

						<div class="col-md-5 product-content-bigimg">
							<img src="<%= @product.photo(:detail) %>" alt="big-img">
                              <% if @product.is_sold_out? %>
                                <div class="sold-out-detail">AGOTADO</div>
                              <% end %>
                            <% if !@product.promotional_price.blank? && @product.promotional_price > 0 %>
                              <div class="ribbon-wrapper-detail"><div class="ribbon"><%= @product.get_discount_percentage %></div></div>
                            <% end %>
							<div class="back"></div>
						</div>

						<div class="col-md-7 product-content-info ">
							<p class="product-content-name"><%= @product.model %>
							</p>

							<div class="prace">
                                <%= render :partial => 'detail_product_price', :locals => { :product => @product } %>


							</div>
							<div class="select-top clearfix">
                                <% unless @product.is_sold_out? %>

								<div class="col-md-6 not-right select-colors">

                                    <p>Colores<i>*</i></p>

                                    <% unless @product.product_colors.blank? %>
                                        <%#= select_tag 'colors', options_from_collection_for_select(@product.product_colors, "id", "color_name"), :class => "form-control select-size", :include_blank => 'Seleccione color' %>

                                        <div id="choose-colors" class="clearfix">
                                            <ul class="color-names">
                                                <% @product.product_colors.each do |c| %>
                                                    <li><%= c.color_name %> <%= "(Agotado)" if c.sold_out? %></li>
                                                <% end %>
                                            </ul>

                                            <ul class="color-quantities">
                                                <% @product.product_colors.each do |c| %>
                                                    <% unless c.sold_out? %>
                                                        <li><%= text_field_tag "color_#{c.id}", '0', :class => 'number-content product_color_input' %></li>
                                                    <% else %>
                                                        <li style="height: 26px;"></li>
                                                    <% end %>
                                                <% end %>
                                            </ul>
                                        </div>
                                    <% else %>
                                        <div id="choose-colors" class="clearfix">
                                            <ul class="color-names">
                                                <li>Unico</li>
                                            </ul>

                                            <ul class="color-quantities">
                                                <li><%= text_field_tag "color", '0', :class => 'number-content product_color_input' %></li>
                                            </ul>
                                        </div>
                                    <% end %>
									<!--<select class="form-control select-size">
										<option>orange</option>
										<option>right</option>
										<option>red</option>
									</select>-->
								</div>
							</div>
							<div class="block-qty">
                                <!--<span class="qty">Cantidad: <input value="1" class="number-content" id="quantity" type="text"></span>-->

								<div class="add-to-cart c-p-add-to-cart">
										<a href="#" class="add-to-cart-text" id="add-to-cart"><i class="fa fa-shopping-cart"></i>AGREGAR</a>
								</div>

                                <div id="view-cart-trigger" style="position: relative; top: -24px; left: 120px; display: none;">
                                    <a href="<%= show_cart_url %>" class="add-to-cart-text">REALIZAR PEDIDO</a>
                                </div>

                                <div id="continue-navigation">
                                    <a href="<%= products_url(:page => @product_page) %>" class="add-to-cart-text">SEGUIR NAVEGANDO</a>
                                </div>
							</div>
                            <% else %>
                              <p>El producto se encuentra agotado.</p>
                            <% end %>
						</div>
					</div>


		 <!-- end section div.product-price-page-slider -->
	</section>
</div>



	</div>
	</div>


<div class="box-section info-section single-post">
					<div class="box-section info-section">

					</div>
				</div>


<div id="how-to-modal" class="warning-modal" style="display: none;">
    <h1>ATENCIÓN</h1>

    <p>El pedido se podr&aacute; realizar en un m&aacute;ximo de <%= @order_ttl %> d&iacute;as. Luego de dicho tiempo, los elementos seleccionados se borrar&aacute;n.</p>

    <p class="ok-link modal-close">Entendido</p>
</div>